<template>
  <div style="height:100vh;background-image:linear-gradient(135deg,#1352F2,#3C82F5);overflow:hidden;">
    <el-container style="padding:30px;">
      <el-header>
        <el-row :gutter="10">
          <el-col :span="3">
            <img src="/imgs/login/logo.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/auto.png" style="height: 50px;">
          </el-col>
          <el-col :span="1">
            <img src="/imgs/login/verticalLine.png" style="height: 50px;">
          </el-col>
          <el-col :span="19">
            <span style="color:#fff;font-size:30px;font-weight:bold;">营销运营系统</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <el-row :gutter="40">
          <el-col :span="16">
            <img src="/imgs/login/bg.png" style="width:100%;margin-top:60px;">
          </el-col>
          <el-col :span="8">
            <el-card style="margin-top:80px;">
              <h3 style="text-align:center;">用户注册</h3>
              <el-form :model="user" label-position="top" :rules="rules" ref="formRef">
                <el-form-item label="用户名" prop="username">
                  <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input placeholder="请输入密码" type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input placeholder="请再次输入密码" type="password" v-model="user.confirmPassword"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="phone">
                  <el-input placeholder="请输入手机号" v-model="user.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="verifyCode">
                  <el-row :gutter="10">
                    <el-col :span="16">
                      <el-input placeholder="请输入验证码" v-model="user.verifyCode"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <el-button :disabled="countdown > 0" @click="sendVerifyCode">
                        {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="agreed" style="margin-bottom:15px;">我已阅读并同意<a href="#" style="color:#1352F2;">《用户协议》</a>和<a href="#" style="color:#1352F2;">《隐私政策》</a></el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width:100%;" @click="register" :disabled="!agreed">注册</el-button>
                </el-form-item>
              </el-form>
              <div style="color:#666;text-align:center;font-size:14px;padding:10px 0;">
                已有账号？<router-link to="/login" style="color:#1352F2;">点击登录</router-link>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const formRef = ref(null);

// 用户表单数据
const user = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  email: '',
  phone: '',
  verifyCode: ''
});

// 表单验证规则
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3-20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== user.password) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  verifyCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '验证码为6位数字', trigger: 'blur' }
  ]
});

// 验证码倒计时
const countdown = ref(0);
const agreed = ref(false);

// 发送验证码
const sendVerifyCode = () => {
  // 验证手机号格式
  if (!/^1[3-9]\d{9}$/.test(user.phone)) {
    ElMessage.error('请输入有效的手机号');
    return;
  }

  // 模拟发送验证码
  ElMessage.success('验证码已发送，请注意查收');

  // 设置倒计时
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);

  // 这里应该添加实际的发送验证码API调用
};

// 注册处理
const register = () => {
  formRef.value.validate(valid => {
    if (valid) {
      if (!agreed.value) {
        ElMessage.warning('请阅读并同意用户协议和隐私政策');
        return;
      }

      // 这里应该添加实际的注册API调用
      console.log('注册信息:', user);

      // 模拟注册成功
      ElMessage.success('注册成功，请登录');
      setTimeout(() => {
        router.push('/login');
      }, 1500);
    } else {
      ElMessage.error('请完善注册信息');
    }
  });
};
</script>

<style scoped>
.el-form-item__label {
  font-weight: bold;
}

.el-input__inner {
  height: 40px;
}

.el-button {
  height: 40px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>
